<template>
	<!-- 辅助空白 -->
	<view class="diy-shop">
		<view class="shop-item" v-for="(dataItem,index) in dataList " :for-item="dataItem" :key="index">
			<form @submit="_onTargetDetail" report-submit="true" :data-id=" dataItem.shop_id">
				<button formType="submit" class="btn-normal dis-flex flex-y-center" >
					<view class="shop-item__logo">
						<image class="image" :src="dataItem.logo_image "></image>
					</view>
					<view class="shop-item__content flex-box">
						<view class="shop-item__title">
							<span>{{ dataItem.shop_name }}</span>
						</view>
						<view class="shop-item__address onelist-hidden">
							<span>门店地址：{{ dataItem.region.province }}{{ dataItem.region.city }}{{ dataItem.region.region }}{{ dataItem.address }}</span>
						</view>
						<view class="shop-item__phone">
							<span>联系电话：{{ dataItem.phone }}</span>
						</view>
					</view>
				</button>
			</form>
		</view>
	</view>
</template>

<script>
	export default {
		/**
		 * 组件的属性列表
		 * 用于组件自定义设置
		 */
		props: {
			dataList: {}
		},

		/**
		 * 组件的方法列表
		 * 更新属性和数据的方法与更新页面数据的方法类似
		 */
		methods: {

			/**
			 * 跳转门店详情页
			 */
			_onTargetDetail(e) {
				// 记录formid
				// this.saveFormId(e.detail.formId);
				console.log(e);
				uni.navigateTo({
					url: '../../pages/shop/detail/detail?shop_id=' + e.currentTarget.dataset.id,
				});
			},
		}

	}
</script>

<style>
	/* common.wxss */
	/* @import "/utils/common.wxss"; */

	/* 线下门店 */

	.shop-item {
		padding: 16rpx 30rpx;
		min-height: 180rpx;
		font-size: 26rpx;
		line-height: 1.5;
		border-bottom: 1rpx solid #eee;
		box-sizing: border-box;
	}

	.shop-item__logo {
		margin-right: 30rpx;
	}

	.shop-item__logo .image {
		display: block;
		width: 130rpx;
		height: 130rpx;
		border-radius: 50%;
		border: 1px solid rgba(0, 0, 0, 0.1);
		/* box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.1); */
	}

	.shop-item__title {
		font-size: 28rpx;
		color: #fd4a5f;
		margin-bottom: 10rpx;
	}

	.shop-item__address,
	.shop-item__phone {
		color: #919396;
	}

	.shop-item__address {
		width: 520rpx;
	}

	.shop-item__distance {
		margin-top: 10rpx;
		color: #c1c1c1;
		height: 40rpx;
	}

	.shop-item__distance .iconfont {
		color: #81838e;
		margin-right: 6rpx;
	}
</style>
